<template>
  <div class="ceshi">
    <el-drawer :close-on-click-modal="false" class="hm-drawer" :size="step == 1 ? '60%' : '720'" direction="rtl"
      v-model="show" :before-close="handleClose">
      <template #header>
        <div class="hm-box-title">商品入库</div>
      </template>
      <div v-show="step == 1">
        <div class="hm-form-item-box1">
          <div class="hm-form-title" style=" position: relative; ">基本信息</div>

          <el-row class="hm-row3 mb96" :gutter="60">
            <div style="margin-left: 30px">
              <image-preview :src="goodswarehousingData.productImage" :width="318" :height="260" />
            </div>
            <el-col :span="14">
              <div class="div_flex">
                <div class="div_flex_items">
                  <div class="label">商品名称：</div>
                  <div class="value">{{ goodswarehousingData.styleName }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">商品编码：</div>
                  <div class="value">{{ goodswarehousingData.productsId }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">品牌名称：</div>
                  <div class="value">{{ goodswarehousingData.brandName || '-' }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">类目：</div>
                  <div class="value">{{ goodswarehousingData.productCategoryName }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">{{ goodswarehousingData.type == '1' ? '研发部：' : '招商部：' }}</div>
                  <div class="value">{{ goodswarehousingData.recruiterDept }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">{{ goodswarehousingData.type == '1' ? '研发专员：' : '招商员：' }}</div>
                  <div class="value">{{ goodswarehousingData.recruiterName }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">是否走仓：</div>
                  <div class="value">{{ goodswarehousingData.warehouse ? '是' : '否' }}</div>
                </div>
                <div class="div_flex_items">
                  <div class="label">规格/材质：</div>
                  <div class="value">{{ goodswarehousingData.specs || '-' }}</div>
                </div>
                <div class="div_flex_item">
                  <div class="label">卖点：</div>
                  <div class="value">{{ goodswarehousingData.sellingPoints }}</div>
                </div>
              </div>
            </el-col>
          </el-row>

          <div class="hm-form-title titles">本次合作信息</div>
          <div class="hm-form-mechanism" v-for="(item, index) in goodswarehousingData.hmMechanismsList" :key="index">
            <div class="mechanism_title" v-if="item.cooperationMode">{{ '机制' + (index + 1) }}：</div>
            <div class="mechanism_flex" v-if="item.cooperationMode">
              <div class="mechanism_div">
                <div class="title">合作方式：</div>{{ item.cooperationMode }}
              </div>
              <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                <div class="title">售价：</div>{{ item.price }}
              </div>
              <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                <div class="title">佣金：</div>{{ item.commission ? item.commission + '%' : '-' }}
              </div>
              <div class="mechanism_div">
                <div class="title">直播机制：</div>{{ item.liveStreamingMechanism || '-' }}
              </div>
              <div class="mechanism_div">
                <div class="title">成本价：</div>{{ item.costPrice || '-' }}
              </div>
              <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                <div class="title">补充佣金：</div>{{ item.brokerage ? item.brokerage + '%' : '-' }}
              </div>
            </div>
          </div>
          <div class="hm-form-mechanism">
            <div class="mechanism_title">商家信息</div>
            <div class="mechanism_flex">
              <div class="mechanism_div">
                <div class="title">供应商名：</div>
                <div>{{ goodswarehousingData.supplierName }}</div>
              </div>
              <div class="mechanism_div">
                <div class="title">联系人：</div>
                <div>{{ goodswarehousingData.contactName }}</div>
              </div>
              <div class="mechanism_div">
                <div class="title">联系方式：</div>
                <div>{{ goodswarehousingData.phone }}</div>
              </div>
              <div class="mechanism_div">
                <div class="title">售卖合同：</div>
                <div style="color: #0094FF;cursor: pointer;" @click="dowload(goodswarehousingData.contractSellOssId)">{{
                  goodswarehousingData.contractSellName }}</div>
              </div>
              <div class="mechanism_div">
                <div class="title">破价合同：</div>
                <div style="color: #0094FF;cursor: pointer;"
                  @click="dowload(goodswarehousingData.contractDiscountOssId)">{{
                    goodswarehousingData.contractDiscountName }}</div>
              </div>
              <div class="mechanism_div">
                <div class="title">保证金协议：</div>
                <div style="color: #0094FF;cursor: pointer;" @click="dowload(goodswarehousingData.marginNameUrlssId)">{{
                  goodswarehousingData.marginName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="step == 2">
        <div class="hm-form-item-box1">
          <div class="hm-form-title" style=" position: relative; ">入库确认</div>
          <div class="form">
            <el-form ref="warehousingRef" :model="warehousingform" style="width: 100%" :inline="true"
              :rules="warehousingrules" label-width="120px">
              <el-row>
                <div class="seat"></div>
                <el-col :span="24">
                  <el-form-item label="库存编码" prop="stockCode">
                    <el-input v-model="warehousingform.stockCode" placeholder="请输入" clearable style="width: 390px;"
                      maxlength="25" />
                  </el-form-item>
                  <el-form-item label="入库数量" prop="putNum">
                    <el-input v-model="warehousingform.putNum" placeholder="请输入" clearable style="width: 390px;"
                      maxlength="3" />
                  </el-form-item>
                  <el-form-item label="过期提醒" prop="noticeTag">
                    <el-switch v-model="warehousingform.noticeTag" :active-value="1" :inactive-value="0" />
                  </el-form-item>
                  <el-form-item label="保质期至" prop="overdueTime">
                    <el-date-picker v-model="warehousingform.overdueTime" type="date" placeholder="请选择" clearable
                      value-format="YYYY-MM-DD" style="width: 390px;" />
                  </el-form-item>
                  <!-- <el-form-item label="历史最低售价" prop="historyPrice">
                    <el-input v-model="warehousingform.historyPrice" placeholder="请输入" clearable
                      style="width: 390px;" />
                  </el-form-item> -->
                  <el-form-item label="备注" prop="inAuditRemark">
                    <el-input :rows="6" type="textarea" v-model="warehousingform.inAuditRemark" placeholder="请输入"
                      clearable maxlength="100" style="width: 390px;" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="hm-form-title" style=" position: relative; ">实拍补图</div>
          <ImageUploadDrag v-model="imgs" :limit="5" />
        </div>
      </div>
      <template #footer v-if="look !== 'look'">
        <div style="flex: auto">
          <el-button @click="cancel" v-if="step == 2">取消</el-button>
          <el-button :loading="inLoading" type="primary" @click="handleSave(warehousingRef)"
            v-if="step == 2">确定</el-button>
          <el-button @click="refuses()" v-if="step == 1">拒绝</el-button>
          <el-button type="primary" @click="handleNextstep(warehousingRef)" v-if="step == 1">下一步</el-button>
        </div>
      </template>
    </el-drawer>
    <el-dialog v-model="centerDialogVisible" title="驳回建议" width="500" align-center>
      <el-input v-model="textarea" :rows="6" type="textarea" placeholder="请输入驳回建议" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="rejectCancel">取消</el-button>
          <el-button :loading="refuseLoading" type="primary" @click="rejectSave">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Goodswarehousing" lang="ts">
import type { FormInstance } from 'element-plus';
import { pass, refuse } from '@/api/group/productOutbound/index';
import { validateInteger } from '@/utils/validate';
import { inventoryCoding } from '@/utils/validate';
import { exportCertId, auditAction } from '@/api/group/investmentPromotion/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const validateinAuditRemark = (rule: any, value: string, callback: any) => {
  const reg = /^[\u4e00-\u9fa5A-Za-z0-9，。？！“”‘’；：，。、（）《》【】“”‘’“”…—\s]+$/;
  if (!reg.test(value) && value) {
    callback(new Error('请输入正确格式'));
  } else {
    callback();
  }
};
const validatehistoryPrice = (rule: any, value: string, callback: any) => {
  const reg = /^(?!0(\.00?)?$)(?![0.]+$)[1-9]\d{0,5}(\.\d{1,2})?$/;
  if (!reg.test(value) && value) {
    callback(new Error('请输入正确格式'));
  } else {
    callback();
  }
};

// 入库
const warehousingRef = ref<FormInstance>();
const inLoading = ref(false);
const warehousingform = ref<{
  stockCode?: string;
  putNum?: string | number;
  historyPrice?: string | number;
  inAuditRemark?: string;
  noticeTag?: number;
  overdueTime?: string;
}>({
  stockCode: undefined,
  putNum: undefined,
  historyPrice: undefined,
  inAuditRemark: undefined,
  noticeTag: 0,
  overdueTime: ''
});
const warehousingrules = ref({
  stockCode: [{ required: true, message: '请输入库存编码', trigger: 'blur' }, { validator: inventoryCoding }],
  historyPrice: [{ validator: validatehistoryPrice }],
  putNum: [{ required: true, message: '请输入入库数量', trigger: 'blur' }, { validator: validateInteger }],
  inAuditRemark: [{ required: false, message: '请输入备注', trigger: 'blur' }, { validator: validateinAuditRemark }]
});

// 驳回建议flag
const centerDialogVisible = ref(false);
const refuseLoading = ref(false);
// 驳回建议
const textarea = ref('');

const step = ref(1);
const imgs = ref();

const props = defineProps({
  goodswarehousingData: {
    type: Object,
    default: ''
  },
  goodswarehousingVisible: {
    type: Boolean,
    default: false
  },
  look: {
    type: String,
    default: ''
  }
});
/** 拒绝 */
const refuses = async () => {
  centerDialogVisible.value = true;
  // warehousingRef.value?.resetFields()
};
/** 驳回建议取消 */
const rejectCancel = () => {
  textarea.value = '';
  centerDialogVisible.value = false;
};
/** 驳回建议保存 */
const rejectSave = async () => {
  if (!textarea.value) {
    proxy?.$modal.msgError('请输入驳回建议');
  } else {
    refuseLoading.value = true;
    try {
      await refuse({
        stockId: props.goodswarehousingData.id,
        stockAuditRemark: textarea.value,
        productsId: props.goodswarehousingData.productsId
      });
      proxy?.$modal.msgSuccess('驳回成功');
      centerDialogVisible.value = false;
      textarea.value = '';
      refuseLoading.value = false;
      handleClose();
    } catch (err) {
      refuseLoading.value = false;
    }
  }
};
const show = computed(() => props.goodswarehousingVisible);
const emits = defineEmits(['doClose', 'nextStep']);
const handleClose = () => {
  step.value = 1;
  warehousingRef.value?.resetFields();
  emits('doClose');
};
/** 下一步 */
const handleNextstep = async (formEl: FormInstance | undefined) => {
  step.value = 2;
};
/** 取消 */
const cancel = () => {
  step.value = 1;
};
/** 确定 */
const handleSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      inLoading.value = true;
      try {
        const list = JSON.parse(JSON.stringify(warehousingform.value));
        list.stockImage = imgs.value;
        list.productsId = props.goodswarehousingData.productsId;
        list.stockId = props.goodswarehousingData.id;
        await pass(list);
        proxy?.$modal.msgSuccess('商品入库成功');
        imgs.value = undefined;
        step.value = 1;
        warehousingRef.value?.resetFields();
        formEl.resetFields();
        inLoading.value = false;
        emits('doClose');
      } catch (err) {
        inLoading.value = false;
      }
    }
  });
};
/** 下载 */
const dowload = (ossId: any) => {
  if (ossId) {
    window.open(ossId, '_blank');
  }
};
onMounted(() => { });
</script>
<style lang="scss" scoped>
.hm-box-title {
  font-weight: 600;
  font-size: 21px;
  color: #1a1b1c;
  padding-bottom: 24px;
  border-bottom: 1px solid #f3f3f7;
}

.div_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #606266;
  min-height: 100%;

  .div_flex_items {
    width: 50%;
    display: flex;
    align-items: flex-start;
    min-height: 13%;
  }

  .div_flex_item {
    width: 100%;
    display: flex;
    align-items: flex-start;
  }

  .label {
    width: 100px;
  }

  .value {
    width: calc(100% - 100px);
  }
}

.hm-form-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1b1c;
  margin-bottom: 10px;
}

.titles {
  margin-bottom: 20px;
}

:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
}

:deep(.el-drawer__body) {
  overflow-x: hidden !important;
}

.mb96 {
  margin-bottom: 20px;
}

.des {
  width: calc(100% - 400px);
}

:deep(.upload-file-uploader) {
  width: 360px;
  margin: auto;
}

:deep(.el-upload__tip) {
  text-align: center;
}

.seat {
  width: 318px;
}

.hm-form-mechanism {
  .mechanism_title {
    font-weight: 500;
    font-size: 14px;
    color: #1a1b1c;
    margin-bottom: 15px;
  }

  .mechanism_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    .mechanism_div {
      margin-bottom: 15px;
      width: calc(100% / 3);
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;

      .title {
        font-size: 14px;
        color: #303133;
        width: 100px;
      }
    }
  }
}
</style>